import React, {Component} from 'react';
import {Alert, FlatList, PixelRatio, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import ScrollableTabView, {DefaultTabBar} from 'react-native-scrollable-tab-view';
import Toast from '../component/Toast';
import axiosInstance from '../utils/request';

//屏幕信息
var dimensions = require('Dimensions');

export default class CostMasterDetail extends Component {



    constructor(props){
		super(props);
		this.state = {
			page:1,
            isLoading: true,
            //网络请求状态
            error: false,
            errorInfo: "",
            dataArray: [],
            showFoot:0, // 控制foot， 0：隐藏footer  1：已加载完成,没有更多数据   2 ：显示加载中
            isRefreshing:false,//下拉控制
	 	};
	}

	//组件挂载完成后执行的方法
	componentDidMount(){
		let custCode= this.props.custCode;
		this.setState({
            custCode:custCode
        });
		const data = {
			custCode:custCode,
		};
		this.fetchCostMasterDetail(data);
	}

	gotoEntry = () => {
		this.props.navigation.navigate('Entry', {custCode:this.state.custCode});
	}

	gotoPay = () => {
		let sumCharge=this.state.sumCharge;
		if(sumCharge==0){
			Alert.alert('提示','不存在未缴费的记录！');
		}else{
			this.props.navigation.navigate('PayScene', {custCode:this.state.custCode});
		}
	}

	fetchCostMasterDetail(data) {
		let url=global.server.url+'/costMaster/selectCostMasterDetail';
		axiosInstance({
		  method: 'post',
		  url: url,
		  data: data
		})
		.then(res => {
			let sumCost=0;
			let sumFact=0;//实收总额
			let sumCharge=0;//欠费总额
			let sumQuantity=0;
			let datas = [];
			datas = datas.concat(res);
			datas.map(function(item,index){
				sumCost+=item.sumCost;
				sumFact+=item.sumFact;
				sumCharge+=item.sumCharge;
				sumQuantity+=item.quantity;
			});
			this.setState({
				loaded:true,
				list:datas,
				count:datas.length,
				sumCost:sumCost,
				sumFact:sumFact,
				sumCharge:sumCharge,
				sumQuantity:sumQuantity,
			},()=>{

			})
		 })
		 .catch(err => {
			Toast.show("发生异常，请联系系统管理员:"+err);
		 })
	}

	//返回itemView
    _renderItemView(item) {
		//这里返回的就是每个Item
        return (
            <TouchableOpacity
				activeOpacity={0.8}
				style={{
					height:170,
					flexDirection:'row',
					alignItems:'center',
					borderBottomWidth:1,
					borderBottomColor:'#D7D7D7',
					paddingLeft:6
				}}>
				<View style={{flex:1}}>
					<View style={styles.flex}>
						<View style={[styles.containermiddle,styles.sbu_blue]}>
							<View style={[styles.item,styles.lineLeftRight]}>
								<View style={[styles.center,styles.flex,styles.lineCenter]}>
									<Text style={styles.font}>上期日期</Text>
								</View>
								<View style={[styles.center,styles.flex,styles.lineCenter]}>
									<Text style={styles.font}>本期日期</Text>
								</View>
								<View style={[styles.center,styles.flex,styles.lineCenter]}>
									<Text style={styles.font}>应收水费</Text>
								</View>
								<View style={[styles.center,styles.flex,styles.lineCenter]}>
									<Text style={styles.font}>应收污水费</Text>
								</View>
								<View style={[styles.center,styles.flex,styles.lineCenter]}>
									<Text style={styles.font}>应收卫生费</Text>
								</View>
								<View style={[styles.center,styles.flex,styles.lineCenter]}>
									<Text style={styles.font}>应收总额</Text>
								</View>
							</View>
							<View style={styles.item}>
								<View style={[styles.center,styles.flex,styles.lineCenter]}>
									<Text style={styles.font}>{item.priorReadingTime}</Text>
								</View>
								<View style={[styles.center,styles.flex,styles.lineCenter]}>
									<Text style={styles.font}>{item.currReadingTime}</Text>
								</View>
								<View style={[styles.center,styles.flex,styles.lineCenter]}>
									<Text style={styles.font}>{item.waterCost}</Text>
								</View>
								<View style={[styles.center,styles.flex,styles.lineCenter]}>
									<Text style={styles.font}>{item.sewageCost}</Text>
								</View>
								<View style={[styles.center,styles.flex,styles.lineCenter]}>
									<Text style={styles.font}>{item.healthCost}</Text>
								</View>
								<View style={[styles.center,styles.flex,styles.lineCenter]}>
									<Text style={styles.font}>{item.sumCost}</Text>
								</View>
							</View>
							<View style={[styles.item,styles.lineLeftRight]}>
								<View style={[styles.center,styles.flex,styles.lineCenter]}>
									<Text style={styles.font}>上期表码</Text>
								</View>
								<View style={[styles.center,styles.flex,styles.lineCenter]}>
									<Text style={styles.font}>本期表码</Text>
								</View>
								<View style={[styles.center,styles.flex,styles.lineCenter]}>
									<Text style={styles.font}>用水量</Text>
								</View>
								<View style={[styles.center,styles.flex,styles.lineCenter]}>
									<Text style={styles.font}>收款人员</Text>
								</View>
								<View style={[styles.center,styles.flex,styles.lineCenter]}>
									<Text style={styles.font}>收款时间</Text>
								</View>
								<View style={[styles.center,styles.flex,styles.lineCenter]}>
									<Text style={styles.font}>缴费金额</Text>
								</View>
							</View>
							<View style={styles.item}>
								<View style={[styles.center,styles.flex,styles.lineCenter]}>
									<Text style={styles.font}>{item.priorReading}</Text>
								</View>
								<View style={[styles.center,styles.flex,styles.lineCenter]}>
									<Text style={styles.font}>{item.currReading}</Text>
								</View>
								<View style={[styles.center,styles.flex,styles.lineCenter]}>
									<Text style={styles.font}>{item.quantity}</Text>
								</View>
								<View style={[styles.center,styles.flex,styles.lineCenter]}>
									<Text style={styles.font}>{item.operator}</Text>
								</View>
								<View style={[styles.center,styles.flex,styles.lineCenter]}>
									<Text style={styles.font}>{item.payDate}</Text>
								</View>
								<View style={[styles.center,styles.flex,styles.lineCenter]}>
									<Text style={styles.font}>{item.sumFact}</Text>
								</View>
							</View>
						</View>
					</View>
				</View>
			</TouchableOpacity>
        )
    }

    render() {
        //加载后
        return (
			<ScrollableTabView
				style={styles.container}
				tabBarUnderlineStyle={{backgroundColor:'#000000', height:0}}
				renderTabBar={()=><DefaultTabBar backgroundColor='#fff' />}
				tabBarPosition='top'
				onChangeTab={
                    (obj) => {
						let custCode=this.state.custCode;
						//payDate表示是否缴费,1:已缴费，2：未缴费
						const data = {
							custCode:custCode,
							payDate:obj.i
						};
						this.fetchCostMasterDetail(data);
						if(obj.i==3){
							this.gotoEntry();
						}else if(obj.i==4){
							this.gotoPay();
						}
                    }
                }
		    >
				<View style={styles.container} tabLabel="全部">
					<FlatList
						data={this.state.list}
						renderItem = {({item}) =>
							this._renderItemView(item)
						}
					/>
					<View style={{
						height:30,
						flexDirection:'row',
						alignItems:'center',
						borderBottomWidth:1,
						borderBottomColor:'#D7D7D7',
						backgroundColor:"#F5FCFF",
						paddingLeft:6
					}}>
						<View style={styles.flex}>
							<Text style={styles.headerText}>笔数：{this.state.count}</Text>
						</View>
						<View style={styles.flex}>
							<Text style={styles.headerText}>总水量：{this.state.sumQuantity}</Text>
						</View>
						<View style={styles.flex }>
							<Text style={styles.headerText}>应收总额：{this.state.sumCost}</Text>
						</View>
					</View>
				</View>

				<View style={styles.container} tabLabel ="已缴费">
					<FlatList
						data={this.state.list}
						renderItem = {({item}) =>
							this._renderItemView(item)
						}
					/>
					<View style={{
						height:30,
						flexDirection:'row',
						alignItems:'center',
						borderBottomWidth:1,
						borderBottomColor:'#D7D7D7',
						backgroundColor:"#F5FCFF",
						paddingLeft:6
					}}>
						<View style={styles.flex}>
							<Text style={styles.headerText}>笔数：{this.state.count}</Text>
						</View>
						<View style={styles.flex}>
							<Text style={styles.headerText}>总水量：{this.state.sumQuantity}</Text>
						</View>
						<View style={styles.flex }>
							<Text style={styles.headerText}>应收总额：{this.state.sumCost}</Text>
						</View>
					</View>
				</View>

				<View style={styles.container} tabLabel ="未缴费">
					<FlatList
						data={this.state.list}
						renderItem = {({item}) =>
							this._renderItemView(item)
						}
					/>
					<View style={{
						height:30,
						flexDirection:'row',
						alignItems:'center',
						borderBottomWidth:1,
						borderBottomColor:'#D7D7D7',
						backgroundColor:"#F5FCFF",
						paddingLeft:6
					}}>
						<View style={styles.flex}>
							<Text style={styles.headerText}>笔数：{this.state.count}</Text>
						</View>
						<View style={styles.flex}>
							<Text style={styles.headerText}>总水量：{this.state.sumQuantity}</Text>
						</View>
						<View style={styles.flex }>
							<Text style={styles.headerText}>应收总额：{this.state.sumCost}</Text>
						</View>
					</View>
				</View>

				<Text tabLabel='抄表'></Text>

				<Text tabLabel='缴费'></Text>
		     </ScrollableTabView>
        );
    }
}

const styles = StyleSheet.create({
    container: {
       flex: 1,
       flexDirection: 'column',
       backgroundColor: 'white'
    },
	flex:{
		flex:1
	},
	containermiddle:{
		marginTop:1,
		marginLeft:5,
		marginRight:5,
		height:165,
		flexDirection:'row',
		padding:2,
	},
	sbu_blue:{
        borderColor:'#3D98FF',
    },
	item:{
		flex:1,
		height:170,
  	},
	center:{
		justifyContent:'center',
		alignItems:'center'
	},
	lineLeftRight:{
		borderLeftWidth:1/PixelRatio.get(),
		borderRightWidth:1/PixelRatio.get(),
		borderColor:'#fff'
    },
	lineCenter:{
		borderBottomWidth:1/PixelRatio.get(),
		borderColor:'#fff'
    },
});
